<template>
	<view>
		<u-card :title="data.nickName" :sub-title="formatTime(data.createTime,'{y}-{m}-{d}')" :thumb="data. avatar" border="false"
			margin="10rpx 5rpx" padding="20">
			<view slot="body">
				<view class="u-body-item  u-border-bottom u-col-between u-p-t-0">
					<view class="u-body-item-title u-line-2">
						<p>
							{{ data.content }}
						</p>
					</view>
					<view style="display: flex; flex-wrap: wrap;margin-top: 10%;">
						<view v-if="data.type == 1">
							<video ref="videoPlayer" :src="data.sysFileInfos[0].fileUrl" :play-btn-position="center" :loop="true" :autoplay="true"
								:enable-play-gesture="true">
							</video>
						</view>
						<view style="width: 32.3%; margin: 0% 1% 1% 0%" v-for="(image, fileIndex) in data.sysFileInfos"
							:key="image.id" @tap.stop="seeme(data.sysFileInfos, fileIndex)" v-else>
							<u-image :src="image.fileUrl" mode="aspectFill" width="100%" height="220rpx"
								:lazy-load="true">
								<u-loading slot="loading"></u-loading>
							</u-image>
						</view>
					</view>
				</view>
				<view style="display: flex;width: 100%;justify-content: space-between;margin-top: 2.5%">
					<view style="display: flex;align-items: center;" v-if="data.likeList.length > 0">
						<view style="margin-right: 10rpx;">
							<u-icon name='heart-fill' size="34"></u-icon>
						</view>
						<text>{{data.likeList}}</text>
					</view>
					<view style="display: flex;" v-if="data.isHide == 1">
						<u-icon name='lock-fill' size="34" @click="openSetting(data)"></u-icon>
						<text>:仅自己可见</text>
					</view>
				</view>
			</view>
			<view slot="foot" style="display: flex;">
				<view style="width: 85%;">
					<u-icon name="map-fill" size="34" color="" :label="data.locationInfo"
						v-if="data.locationInfo"></u-icon>
				</view>
				<view :style="{
					'display': 'flex','justify-content':data.path == 'index'? 'space-between':'flex-end','width': '15%'
				}">
					<u-icon :name="data.isLike ? 'heart-fill' : 'heart'" size="34" @click="like(data)"
						v-if="data.path == 'index'"></u-icon>
					<u-icon name='more-circle' size="34" @click="openSetting(data)"></u-icon>
				</view>
			</view>
		</u-card>
		<u-action-sheet :list="list" v-model="show" :cancel-btn="true" @click="settingOfOption"></u-action-sheet>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		addDailyLike,
		getDailyList,
		getDailyLikeList,
		updateDaily,
		removeDaily
	} from '@/api/bot/daily'
	import config from '@/config'
	export default {
		data() {
			return {
				data: {
					likeList: ''
				},
				baseUrl: config.baseUrl,
				list: [{
					text: '点赞',
					color: '#19be6b',
					subText: '汉堡也为您点赞！'
				}, {
					text: '评论',
					subText: '汉堡提醒您，善言结善缘！'
				}],
				show: false,
				currentOption: null
			}
		},
		onLoad(option) {
			uni.showLoading({
				title: "加载中..."
			})
			const formDataStr = decodeURIComponent(option.data);
			this.data = JSON.parse(formDataStr);
			if (this.data.path !== 'index') {
				this.list = [{
						text: '设置为仅自己可见',
					},
					{
						text: '设置为公开',
					},
					{
						text: '删除该发布内容',
						color: '#fa3534',
						subText: '汉堡提醒您，删除完成将无法撤回！'
					}
				]
				this.data.avatar = this.baseUrl + this.data.avatar
				if (this.data.botDailyLikes && this.data.botDailyLikes.length > 0) {
					// botDailyLikes 不为空且长度大于 0
					this.data.likeList = this.data.botDailyLikes.map(item => item.nickName).join(',')
					this.data.isLike = this.data.botDailyLikes.some(item => item.userId == this.$store.getters.userId)
				} else {
					// botDailyLikes 为空或长度为 0
					this.data.likeList = ''
					this.data.isLike = false
				}

			}
			uni.hideLoading()
		},
		methods: {
			seeme(obj, index) {
				let formData = {
					sysfileInfo: obj,
					currentImages: index
				}
				this.openImage(formData)
			},
			openImage(obj) {
				const content = obj.sysfileInfo.map(item => item.fileUrl)
				uni.previewImage({
					urls: content,
					current: obj.currentImages
				});
			},
			like(obj) {
				if (obj.isLike) {
					obj.isLike = false
				} else {
					obj.isLike = true
				}
				let formData = {
					refDailyId: obj.id,
					publishUserId: obj.userId
				}
				addDailyLike(formData).then(res => {
					if (res.code == 200) {
						console.log("点赞成功")
					} else {
						console.log("点赞失败")
					}
					getDailyLikeList(formData).then(res => {
						obj.likeList = res.rows.map(item => item.nickName).join(',')
					})
				})
			},
			openSetting(obj) {
				this.show = true;
				this.currentOption = obj
			},
			updateDaily() {
				updateDaily(this.data).then(res => {
					if (res.code == 200) {
						this.$modal.msgSuccess("设置成功")
					} else {
						this.$modal.msgError("设置失败")
					}
				})
			},
			removeDaily() {
				removeDaily(this.data).then(res => {
					if (res.code == 200) {
						this.$modal.msgSuccess("删除成功")
					} else {
						this.$modal.msgError("删除失败")
					}
				})
			},
			settingOfOption(index) {
				console.log(`点击了第${index + 1}项，内容为：${this.list[index].text}`)
				if (this.data.path == 'index') {
					if (index === 0) {
						this.like(this.currentOption)
					} else {
						this.$refs.uToast.show({
							title: `模块建设中~`,
							type: 'warning',
						})
					}
				} else {
					if (index === 0) {
						this.data.isHide = 1
						this.updateDaily()
					} else if (index === 1) {
						this.data.isHide = 0
						this.updateDaily()
					} else {
						this.$modal.confirm('确定删除该发布内容吗？').then(() => {
							this.removeDaily()
						})
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.u-card-wrap {
		background-color: $u-bg-color;
		padding: 1px;
	}

	.u-body-item {
		font-size: 32rpx;
		color: #333;
		padding: 20rpx 10rpx;
	}

	.u-body-item image {
		width: 120rpx;
		flex: 0 0 120rpx;
		height: 120rpx;
		border-radius: 8rpx;
		margin-left: 12rpx;
	}
</style>